<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>
<table id="roleList" lay-filter="roleList"></table>

<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["table", "jquery", "layer", "laytpl"], function () {
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let laytpl=layui.laytpl;

        laytpl.getPermissionsByRoleId = function (roleId) {
            let permissionsName="";
            $.ajax({
                url: "/getPermissionsByRoleId",
                dataType: "json",
                type: "get",
                data: "roleId=" + roleId,
                async: false,
                success: function (responseData) {
                    for(let i=0; i<responseData.length; i++){
                        permissionsName=permissionsName+responseData[i].permissionName+"，";
                    }
                },
                error: function () {
                    console.log("根据角色id获取权限信息失败！");
                }
            });
            return permissionsName;
        };

        let roleTable=table.render({
            elem: "#roleList",
            id: "roleListId",
            url: "/getRoles",
            page: false,
            limit: 5,
            limits: [5, 10, 15],
            method: "post",
            size: "sm",
            toolbar: true,
            toolbar: "#toolbarTemplet",
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg",
            },
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize",
            },
            cols: [
                [
                    {type: "checkbox", fixed: "left", align: "center"},
                    {field: "roleId", title: "ID", width: 80, align: "center"},
                    {field: "role", title: "角色", width: 150, align: "center",},
                    {field: "roleName", title: "名称", width: 150, align: "center"},
                    {title: "权限", width: 600, align: "center", templet: "#permissionsTpl"},
                    {title: "操作", fixed: "right", templet: "#operateTemplete", align: "center"}
                ]
            ]
        });

        table.on("toolbar(roleList)", function (obj) {
            console.log(obj.event);
            switch (obj.event) {
                case "batchDelete":
                    batchDelete();
                    break;
                case "addRole":
                    addRole();
                    break;
            }
        });

        function batchDelete() {
            layer.confirm("确定要批量删除项目吗？",
                {
                    title: "提示",
                    icon: 3,
                },
                function (index) {
                    let checkStatus = table.checkStatus("roleListId");
                    let roleIds = "";
                    if (checkStatus.data.length > 0) {
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            roleIds = roleIds + checkStatus.data[i].roleId + ",";
                        }
                    } else {
                        layer.msg("未选择有效数据", {offset: "t", anim: 6});
                    }

                    if (roleIds != "") {
                        let loadIndex = null;
                        $.ajax({
                            url: "/batchDeleteRolesById",
                            dataType: "json",
                            data: "roleIds=" + roleIds,
                            type: "post",
                            async: true,
                            timeOut: 10000,
                            beforeSend: function () {
                                loadIndex = layer.load();
                            },
                            success: function (responseResult) {
                                layer.close(loadIndex);
                                if (responseResult.code == 1) {
                                    layer.msg(responseResult.msg, {icon: 1, time: 1000});
                                } else {
                                    layer.msg(responseResult.msg, {icon: 7, time: 1000});
                                }
                            },
                            error: function () {
                                layer.close(loadIndex);
                                layer.msg("服务器错误，请重试！", {icon: 2, time: 1000});
                            }
                        });
                    }
                    layer.close(loadIndex);
                    roleTable.reload();
                });
        }

        function addRole(){
            layer.open({
                title: "新建角色",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["90%", "90%"],
                content: "/addRole",
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                    roleTable.reload();
                },
            });
        }

        table.on("tool(roleList)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "deleteRole":
                    deleteRole(data);
                    break;
                case "edit":
                    edit(data);
                    break;
            }
        });

        function deleteRole(data) {
            $.ajax({
                url: "deleteRoleById",
                dataType: "json",
                data: "roleId="+data.roleId,
                type: "get",
                success: function(responseResult){
                    if (responseResult.code == 1) {
                        layer.msg(responseResult.msg, {icon: 1, time: 1000});
                    } else {
                        layer.msg(responseResult.msg, {icon: 7, time: 1000});
                    }
                    roleTable.reload();
                },
                error: function(){
                    layer.msg("服务器错误，请重试！", {icon: 2, time: 1000});
                }
            });

        }
        
        function edit(data) {
            layer.open({
                title: "编辑角色",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["90%", "90%"],
                content: "/editRole?roleId="+data.roleId,
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                    roleTable.reload();
                },
            });
        }

    });
</script>
<script type="text/html" id="toolbarTemplet">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="addRole">新建角色</button>
    </div>
</script>
<script type="text/html" id="operateTemplete">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"
              style="padding-right: 5px;margin-right: 5px">编辑</span>
        <span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteRole"
              style="padding-right: 5px;margin-right: 5px">删除</span>
    </div>
</script>
<script type="text/html" id="permissionsTpl">
    <span>{{ layui.laytpl.getPermissionsByRoleId(d.roleId) }}</span>
</script>
</body>
</html>